.ingredients-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 20px;
  display: flex;
  flex-direction: column;

  .header {
    margin-bottom: 20px;

    .title {
      display: block;
      font-size: 34px;
      font-weight: bold;
      color: #333;
      margin-bottom: 8px;
    }

    .subtitle {
      display: block;
      font-size: 26px;
      color: #666;
    }
  }

  .selected-count {
    background: #ffffff;
    padding: 15px;
    border-radius: 8px;
    font-size: 26px;
    color: #666;
    margin-bottom: 15px;
    display: flex;
    align-items: center;

    .count {
      color: #ff6b6b;
      font-weight: bold;
      font-size: 28px;
      margin: 0 4px;
    }

    .clear-btn {
      margin-left: auto;
      color: #4a90e2;
      font-size: 26px;
    }
  }

  .categories-container {
    flex: 1;
    margin-bottom: 90px;

    .category-section {
      margin-bottom: 20px;
      background: #ffffff;
      border-radius: 8px;
      padding: 15px;

      .category-title {
        font-size: 28px;
        font-weight: bold;
        color: #333;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #f0f0f0;
      }

      .ingredients-list {
        display: flex;
        flex-wrap: wrap;

        .taroify-checkbox-group {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          gap: 15px;
        }

        .ingredient-item {
          width: calc(33.33% - 15px);
          background: #f9f9f9;
          border-radius: 6px;
          padding: 15px 0;
          text-align: center;
          margin-bottom: 15px;

          .taroify-checkbox {
            padding: 0;

            &__icon {
              font-size: 28px;
            }

            &__label {
              font-size: 26px;
              margin-left: 8px;
            }
          }

          &--checked {
            background: #ffefef;

            .taroify-checkbox__icon {
              color: #ff6b6b;
            }
          }
        }
      }
    }
  }

  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

    .generate-btn {
      --button-primary-background-color: #ff6b6b;
      --button-primary-border-color: #ff6b6b;
      --button-height: 52px;
      --button-font-size: 28px;
      border-radius: 26px;
      font-weight: bold;

      &--disabled {
        opacity: 0.6;
      }
    }
  }

  .taroify-toast {
    --toast-max-width: 70%;
    --toast-background-color: rgba(50, 50, 50, 0.9);
    --toast-font-size: 26px;
    font-size: 26px;
  }
}
